<main>
    <div class="tools-header">
      <button class="openModalBtn">Add New Student</button>
      <div>
        <input type="text" name="keyword" class="keyword" placeholder="Search by name">
        <button type="button" class="searchBtn">Search</button>
      </div>
    </div>
  
    <table class="studentTable">
      <thead>
        <tr>
          <th><input type="checkbox" class="selectAll"></th>
          <th>ID</th>
          <th>Name</th>
          <th>Gender</th>
          <th>Hobbies</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Age</th>
          <th>Created At</th>
          <th>Updated At</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <!-- Student rows will be added dynamically here -->
      </tbody>
    </table>
  
    <!-- Modal for adding/editing students -->
    <div class="studentModal modal">
      <div class="modal-content">
        <h3 class="modalTitle">Add New Student</h3>
        <form class="studentForm">
          <input type="hidden" class="studentIdToEdit">
  
          <label for="studentName">Name</label>
          <input type="text" name="name" class="studentName" required>
  
          <label for="studentGender">Gender</label>
          <select name="gender" class="studentGender" required>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>
  
          <label for="studentHobbies">Hobbies</label>
          <input type="text" name="hobbies" class="studentHobbies" required>
  
          <label for="studentEmail">Email</label>
          <input type="email" name="email" class="studentEmail" required>
  
          <label for="studentPhone">Phone</label>
          <input type="text" name="phone" class="studentPhone" required>
  
          <label for="studentAge">Age</label>
          <input type="number" name="age" class="studentAge" required>
  
          <button type="submit" class="saveStudentBtn">Save Student</button>
        </form>
      </div>
    </div>
  </main>
  